<template>
  <div>
    <el-dialog
      v-model="showDialog"
      draggable
      append-to-body
      width="640px"
      destroy-on-close
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <span :id="titleId" :class="titleClass">席位颜色设置</span>
          <span>
            <el-button type="primary" @click="close" link>取消</el-button>
            <el-button
              type="primary"
              @click="handleSave()"
              :disabled="changedList.length == 0"
              >保存</el-button
            >
          </span>
        </div>
      </template>
      <el-tabs tab-position="left" type="border-card" style="height: 560px">
        <el-tab-pane v-for="(item, key, index) in flowStore.seatColors">
          <template #label>
            <span
              :class="[
                'seat-rectangle',
                commonStore.darkMode
                  ? 'color-rectangle-dark'
                  : 'color-rectangle-light',
                colorCopies[key][0] != item[0] || colorCopies[key][1] != item[1]
                  ? 'seat-rectangle-changed'
                  : '',
              ]"
              :style="{
                background: `linear-gradient(to bottom right, ${
                  commonStore.darkMode ? item[0] : item[1]
                } 50%, ${
                  commonStore.darkMode
                    ? colorCopies[key][0]
                    : colorCopies[key][1]
                } 50%)`,
              }"
            >
            </span>
            <span>{{ key }}</span>
          </template>
          <div class="setter-colors-wrapper">
            <span
              v-for="color in colors"
              :class="[
                'color-rectangle',
                commonStore.darkMode
                  ? 'color-rectangle-dark'
                  : 'color-rectangle-light',
                colorCopies[key][0] == color.hex && commonStore.darkMode
                  ? 'color-rectangle-dark-selected'
                  : '',
                colorCopies[key][1] == color.hex && !commonStore.darkMode
                  ? 'color-rectangle-light-selected'
                  : '',
              ]"
              :style="{ backgroundColor: color.hex }"
              @click="
                commonStore.darkMode
                  ? (colorCopies[key][0] = color.hex)
                  : (colorCopies[key][1] = color.hex)
              "
            ></span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-collapse-transition>
        <el-tag
          v-show="occupiedList.length > 0"
          type="warning"
          style="width: 100%; margin-top: 12px"
        >
          {{ occupiedList.join("、") }}当前使用中，“扇区信息”中的配色也将被修改
        </el-tag>
      </el-collapse-transition>
    </el-dialog>
  </div>
</template>

<script setup>
import colors from "./SectorColorSetterData.json";
import { ref, computed } from "vue";
import useCommonStore from "@/store/common";
import useFlowStore from "@/store/flow";
import axios from "axios";
import { ElNotification } from "element-plus";

const commonStore = useCommonStore();
const flowStore = useFlowStore();

const showDialog = ref(false);

const open = () => {
  colorCopies.value = JSON.parse(JSON.stringify(flowStore.seatColors));
  showDialog.value = true;
};

const colorCopies = ref(null);

const isOccupied = (key) => {
  let data = false;
  for (let i = 0; i < flowStore.currentSectorScheme.length; i++) {
    if (
      flowStore.currentSectorScheme[i].seatName == key &&
      flowStore.currentSectorScheme[i].sectorCodes.length > 0
    ) {
      data = true;
      break;
    }
  }
  return data;
};

const occupiedList = computed(() => {
  let occupied = new Array();
  changedList.value.forEach((key) => {
    if (isOccupied(key)) {
      occupied.push(key);
    }
  });
  return occupied;
});

const changedList = computed(() => {
  if (!colorCopies) return [];
  let changed = new Array();
  Object.keys(flowStore.seatColors).forEach((key) => {
    if (
      flowStore.seatColors[key][0] != colorCopies.value[key][0] ||
      flowStore.seatColors[key][1] != colorCopies.value[key][1]
    ) {
      changed.push(key);
    }
  });
  return changed;
});

const handleSave = () => {
  let responsedCount = 0;
  for (let i = 0; i < changedList.value.length; i++) {
    let key = changedList.value[i];
    let dark = commonStore.darkMode;
    let color = dark ? colorCopies.value[key][0] : colorCopies.value[key][1];
    console.log(key, color, dark);
    let uri = `api/seat_status_tma_set_color.php?seat=${key}&color=${color.substr(
      1,
      6
    )}&dark=${dark ? 1 : 0}`;
    axios.get(uri).then(() => {
      responsedCount++;
      if (responsedCount == changedList.value.length) {
        flowStore.loadCurrentSectorScheme();
        ElNotification({
          title: "已完成",
          type: "success",
        });
        showDialog.value = false;
      }
    });
  }
};

defineExpose({ open });
</script>

<style scoped>
.my-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setter-colors-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
}

.seat-rectangle {
  margin-right: 4px;
  border-radius: 6px;
  padding: 0px 10px;
}

.seat-rectangle-changed {
  transform: scale(1.75);
}

.seat-key-rectangle {
  padding: 4px 12px;
  transition: all 0.3s ease-in-out;
  border-radius: 6px;
  font-family: "Consolas";
  font-size: 12px;
}

.color-rectangle {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: 7px;
  border-radius: 6px;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

.color-rectangle-dark {
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.color-rectangle-light {
  border: 1px solid rgba(0, 0, 0, 0.75);
}

.color-rectangle-light-selected {
  transform: scale(1.75);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.color-rectangle-dark-selected {
  transform: scale(1.75);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}
</style>
